<template>
	<view>
		<view>
			<image :src="faceImage" mode="" class="head_img"></image>
			<view class="nickName">
				{{nickName}}
			</view>
		</view>
		
		<!-- #ifdef MP-QQ -->
		<button v-if="!isLogin" type="primary" @getuserinfo="qqLogin" class="loginButton" open-type="getUserInfo">一键登录</button>
		<view v-else>
			<button type="default" @click="qqLogin" class="changeButton">切换账号</button>
			<button type="warn" @click="qqLoginOut" class="logoutButton">退出登录</button>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<button v-if="!isLogin" type="primary" @click="qqLogin" class="loginButton" open-type="getUserInfo">一键登录</button>
		<view v-else>
			<button type="default" @click="qqLogin" class="changeButton">切换账号</button>
			<button type="warn" @click="qqLoginOut" class="logoutButton">退出登录</button>
		</view>
		<!-- #endif -->
		
		
	</view>
</template>

<script>
	
	var _self
	
	export default {
		data() {
			return {
				faceImage: '',
				nickName: '',
				isLogin: false
			}
		},
		onLoad() {
			
			_self = this
			
			this.Init()
			
		},
		onPullDownRefresh() {
			this.Init()
			uni.stopPullDownRefresh()
		},
		methods: {
			Init() {
				var userInfo = this.getUser()
				if(userInfo){
					_self.faceImage = userInfo.figureurl_qq
					_self.nickName = userInfo.nickName
					_self.isLogin = true
				}else {
					_self.faceImage = "../../static/qq.jpeg"
					_self.isLogin = false
				}
			},
			qqLogin() {
				uni.login({
					provider: 'qq',
					success(loginRes) {
						
						// 获取用户信息
						uni.getUserInfo({
							provider:"qq",
							success(info) {
								console.log(JSON.stringify(info))
								var userInfo = info.userInfo
								
								_self.faceImage = userInfo.figureurl_qq
								_self.nickName = userInfo.nickName
								_self.isLogin = true
								uni.setStorageSync("userInfo",userInfo)
							}
						})
						
					}
				})
				
			},
			
			qqLoginOut(){
				uni.removeStorageSync("userInfo")
				this.Init()
			}
			
		}
	}
</script>

<style>
	
	.head_img {
		width: 400rpx;
		height: 400rpx;
		border-radius: 50%;
		background-color: #007AFF;
		margin: 40rpx 175rpx;
	}
	
	.loginButton {
		margin-top: 300rpx;
		width: 80%;
	}
	
	.changeButton {
		margin-top: 300rpx;
		width: 80%;
	}
	
	.logoutButton {
		margin: 40rpx auto;
		width: 80%;
	}
	
	.nickName {
		font-size: 25px;
		text-align: center;
	}

</style>
